<template>
    <div>
        <a-modal
            :title="currentRow.modalTitle+'抽选'"
            :visible="visible"
            :confirm-loading="confirmLoading"
            @ok="handleOk"
            @cancel="visible = false"
            :width="850"
            :dialogStyle="{top:'20px'}"
            class="randomlyRegistered-modal-box"
        >
            <div class="randomlyRegistered-content-box">
                <table border bordercolor="#d9d9d9" style="width: 100%;">
                    <tr>
                        <td class="title-left-v">是否回避原单位</td>
                        <td colspan="5">
                            <!-- <compSelector
                                :key="compSelectorkey"
                                v-model="currentRow.sfhbydw" 
                                :defaultValue="currentRow.sfhbydw"
                                compType="Checkbox"
                                dictionaryType="观察员所属地市"
                            /> -->
                            <!-- @selectHandleChange="selectHandleChangeOny('sfhbydw',currentRow.sfhbydw)" -->
                            <compSelector
                                v-model="currentRow.sfhbydw" 
                                compType="Radio"
                                :defaultValue="currentRow.sfhbydw"
                                :options="[{label:'回避',value:'回避'},{label:'不回避',value:'不回避'}]"
                            />
                        </td>
                    </tr>
                    <!-- <tr>
                        <td class="title-left-v">专业特长</td>
                        <td colspan="5">
                            <compSelector
                                :key="compSelectorkey"
                                v-model="currentRow.zytc" 
                                :defaultValue="currentRow.zytc"
                                compType="Checkbox"
                                dictionaryType="药品生产专业特长"
                                separateAreas='zytc001002'
                                
                            />
                            
                        </td>
                    </tr> -->
                    <tr>
                        <td class="title-left-v">组长人数</td>
                        <td>
                            <a-input-number v-model:value="currentRow.fzzrs" :min="0" :precision="0" />
                        </td>
                        <td class="title-left-v">组员人数</td>
                        <td>
                            <a-input-number v-model:value="currentRow.fzyrs" :min="0" :precision="0" />
                        </td>
                        <td class="title-left-v">预备审评员人数</td>
                        <td>
                            <a-input-number v-model:value="currentRow.fybrs" :min="0" :precision="0" />
                        </td>
                    </tr>
                    <!-- <tr>
                        <td class="title-left-v">抽选比例</td>
                        <td colspan="5">
                            1：
                            <a-select size="small" v-model:value="currentRow.blmax">
                                <a-select-option v-for="i in 6" :key="i">
                                    {{ i }}
                                </a-select-option>
                            </a-select>
                        </td>
                    </tr> -->
                    <tr>
                        <!-- <td class="title-left-v">需要选派一名以上药检所人员</td>
                        <td colspan="2">
                            <a-switch :key="switchKey" checked-children="是" un-checked-children="否" :default-checked="currentRow.zdyjsry" @change="switchChange"/>
                            <span v-if="yjsrsNum" style="color: #ed5565;">（已存在<span style="color: #5ca3e5;font-size: 18px;">{{ yjsrsNum }}</span>名药检所人员）</span>
                        </td> -->
                        <td class="title-left-v">是否高频</td>
                        <td colspan="5">
                            <compSelector
                                :key="compSelectorkey"
                                v-model="currentRow.fgpk" 
                                :defaultValue="currentRow.fgpk"
                                compType="Radio"
                                :options="[{
                                    label:'是',
                                    value:'是',
                                },{
                                    label:'否',
                                    value:'否',
                                }]"
                            />
                        </td>
                    </tr>
                    <tr>
                        <td class="title-left-v">专家分类</td>
                        <td colspan="5">
                            <a-tree-select
                                :style="{width: '100%'}"
                                v-modal:value="flxVlaue"
                                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                                placeholder="请选择审评类型"
                                allow-clear
                                multiple
                                tree-default-expand-all
                                @change="onChange"
                            >
                                <a-tree-select-node v-for="(item,index) in flxList" :key="index+'-'+item.type1" :value="item.type1" :title="item.type1">
                                    <a-tree-select-node v-for="(trem,tIndex) in item.type2List" :key="item.type1+'&'+trem" :value="item.type1+'&'+trem" :title="item.type1+'-'+trem">
                                    </a-tree-select-node>
                                </a-tree-select-node>
                            </a-tree-select>
                        </td>
                    </tr>
                    <!-- <tr>
                        <td class="title-left-v">是否发送确认短信</td>
                        <td colspan="5">
                            <compSelector
                                :key="compSelectorkey"
                                v-model="currentRow.fsmszt" 
                                :defaultValue="currentRow.fsmszt"
                                compType="Radio"
                                :options="[{
                                    label:'是',
                                    value:'是',
                                },{
                                    label:'否',
                                    value:'否',
                                }]"
                            />
                        </td>
                    </tr>
                    <tr v-if="currentRow.fsmszt == '是'">
                        <td class="title-left-v">短信内容</td>
                        <td colspan="5">
                            <a-textarea 
                                v-model="currentRow.fdqrdxnr"
                                :autosize="{ minRows: 2, maxRows: 10000 }"
                                placeholder="请输入短信内容"
                            ></a-textarea>
                        </td>
                    </tr> -->
                </table>
                <!-- <commpVxeTable
                    :key="manualKey"
                    :isCanWrap="true"
                    :canWrapTableHeight="320"
                    :config="manualdataTableConfig" 
                    :columns="manualcolumnsVxe" 
                    :formItem="[]"
                    @checkboxChange="checkboxChange"
                    ref="acceptanceRegistrationRef"
                    tablePadding="5px 0"
                >
                    <template v-slot:fcykssj_fcyjssj="{row}" data-desc="审评日期">
                        {{ row.fcykssj }}至{{ row.fcyjssj }}
                    </template>
                    <template v-slot:fbmzt_name="{row}">
                        <span v-if="row.fbmzt == '已发布'" style="color: #66c24f;border: 1px solid #66c24f;border-radius: 20px;padding:0 5px;">报名中</span>
                        <span v-if="row.fbmzt == '已结束'" style="color: #ed5565;border: 1px solid #ed5565;border-radius: 20px;padding:0 5px;">已结束</span>
                    </template>
                    <template v-slot:operation_btn="{row}">
                        <a-form layout="inline" class="search-form" >
                            <a-form-item >
                                <a-button class="blue-btn" type="primary" @click="applicationDetailsClick(row)">报名详情</a-button>
                            </a-form-item>
                        </a-form>
                    </template>
                </commpVxeTable> -->
                <registeredDetails ref="registeredDetailsRef"/>
            </div>
        </a-modal>
    </div>
</template>
<script>
import { 
    commononeTouchHcyByAuto, 
    ybmjhybmJcyXpByAuto, 
    sqsxYwxxgetYbmCxrySendDqrSmsNr, 
    ybmjhybmOrJcyXpByAuto,
    sqsxYwxxgetYxprySlhzt,
    ybmjhverifyCzYjs,
    dictzjflDict,
} from "./service/index";
import assessCheckApi from './service/api'
import compSelector from '@/components/compSelector/compSelector'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import registeredDetails from '../../../forecastNameTask/registeredDetails.vue'
export default {
    components:{
        compSelector,
        commpVxeTable,
        registeredDetails,
    },
    props:{

    },
    data(){
        return{
            currentRow:{},
            visible:false,
            confirmLoading:false,
            compSelectorkey:null,
            manualKey:null,
            manualformItem:[],
            manualcolumnsVxe:[
            //     { 
            //     type: 'checkbox', 
            //     width: 60 ,
            //     fixed: 'left'
            // },
            // {
            //     title: '审评任务名称', //列头显示文字
            //     field: 'fjcbmrwmc',
            // },
            {
                title: '审评日期', //列头显示文字
                width:195,
                field: 'fcykssj',
                slots: {
                    // 使用插槽模板渲染
                    default: 'fcykssj_fcyjssj',
                },
            },{
                title: '审评地点', //列头显示文字
                field: 'fjcdd',
            },{
                title: '审评要求', //列头显示文字
                field: 'fjcyq',
            },{
                title: '报名状态', //列头显示文字
                field: 'fbmzt',
                width:122,
                slots: {
                    // 使用插槽模板渲染
                    default: 'fbmzt_name',
                },
            },{
                title: '操作',
                field: 'id',
                titleInterval:true,
                slots: {
                    // 使用插槽模板渲染
                    header:'operation_header',
                    default: 'operation_btn',
                },
                fixed: 'right',
                width:95
            }], 
            manualdataTableConfig:{
                api: assessCheckApi.ybmjhqueryBmjhmxlbBySqsxId,
                rowId: 'id',
                fywflcode:'001002',
                height:window.innerHeight - 430,
                paramet:{},
                isIdeaText:'',
                autoHidden:true,
            },
            selectArr:[],
            yjsrsNum:0,
            switchKey:null,
            flxVlaue:[],
            flxList:[],
            flxRes:[],
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(row,rysl){
            this.flxVlaue = []
            this.flxList = []
            // ybmjhqueryBmjbxxListBySqsxId
            this.currentRow = {
                ...row,
                fzzrs:row.fzzrs?row.fzzrs:0,
                fzyrs:row.fzyrs?row.fzyrs:0,
                fybrs:row.fybrs?row.fybrs:0,
                blmax:3,
                fgpk:'否',
                sfhbydw:'回避'
                // fsmszt:'否',
            }
            this.manualdataTableConfig.paramet={
                sqsxid:row.sqsxid,
                kssj:row.kssj,
                jssj:row.jssj,
            }
            // this.manualKey = Date.now()
            // this.compSelectorkey = Date.now()
            this.confirmLoading = false
            // sqsxYwxxgetYbmCxrySendDqrSmsNr({sqsxid:row.sqsxid}).then(res=>{
            //     if(res.code == 200){
            //         this.currentRow.fdqrdxnr = res.result
            //         //console.log('获取到什么短信内容',res.result)
            //     }else{}
            // })
            dictzjflDict().then(res=>{
                if(res.code == 200){
                    this.flxList = res.result
                }else{

                }
            })
            ybmjhverifyCzYjs({sqsxid:this.currentRow.sqsxid}).then(res=>{
                if(res.code == 200){
                    this.currentRow.zdyjsry = res.result?false:true
                    this.yjsrsNum = res.result
                }else{
                    this.currentRow.zdyjsry = false
                }
                this.switchKey = Date.now()
            })
            sqsxYwxxgetYxprySlhzt({sqsxid:this.currentRow.sqsxid}).then(res=>{
                if(res.code == 200){
                    //console.log('查询预设人员的数量',res)
                    this.rsData = res.result
                    if(res.result){
                        if(res.result){
                        if(res.result.zzFlag){
                            this.currentRow.fzzrs = Number(rysl.fzzrs) - Number(res.result.xpFzzrs)>0?Number(rysl.fzzrs) - Number(res.result.xpFzzrs):0
                        }
                        if(res.result.zyFlag){
                            this.currentRow.fzyrs = Number(rysl.fzyrs) - Number(res.result.xpFzyrs)>0?Number(rysl.fzyrs) - Number(res.result.xpFzyrs):0
                        }
                        if(res.result.ybFlag){
                            this.currentRow.fybrs = Number(rysl.fybrs) - Number(res.result.xpFybrs)>0?Number(rysl.fybrs) - Number(res.result.xpFybrs):0
                        }
                        
                    }
                        
                    }
                }else{

                }
                this.manualKey = Date.now()
                this.compSelectorkey = Date.now()
            })
        },
        async onChange(value, node){
            console.log('selectvalue',value)
            let res= []
            let arr = value.filter(a=>a.indexOf('&') == -1)
            let zjArr = value.filter(a=>a.indexOf('&') !== -1)
            if(arr.length && zjArr.length){
                arr.forEach((item,index)=>{
                    res.push({fj:item,zj:zjArr.filter(k=>k.indexOf(item) !== -1)})
                })
            }else if(arr.length){
                res = arr
            }else if(zjArr.length){
                let fjArr = []
                await zjArr.forEach((item,index)=>{
                    let i = item.split('&')
                    let dd = fjArr.filter(u=>u == i[0])
                    if(!dd.length){
                        fjArr.push(i[0])
                    }
                    
                })
                fjArr.forEach((item,index)=>{
                    res.push({fj:item,zj:zjArr.filter(k=>k.indexOf(item) !== -1)})
                })
            }
            console.log('最终结果',res)
            let resArr = res.map(i=>{return {fj:i.fj?i.fj:i,zj:i.zj && i.zj.length?i.zj.map(k=>{return k.split('&')[1]}):[]}})
            console.log('最终结果2',resArr)
            // res.map(a=>{ return a.fj+a.})
            this.flxRes = resArr.map(a=>{return a.zj.length?a.fj+'('+a.zj.join('、')+')':a.fj})
        },
        switchChange(val){
            //console.log(val)
            this.currentRow.zdyjsry = val
            this.switchKey = Date.now()
        },
        applicationDetailsClick(row){
            this.$refs.registeredDetailsRef.getData({...row})
            this.$refs.registeredDetailsRef.visible = true
        },
        checkboxChange(valList){
            //console.log(valList)
            this.selectArr = []
            valList.forEach(item => {
                this.selectArr.push(item.id)
            });
        },
        handleOk(){
            if(this.currentRow.fzzrs || this.currentRow.fzyrs || this.currentRow.fybrs){
                if(this.currentRow.fsmszt == '是' && !this.currentRow.fdqrdxnr){
                    this.$message.warning('请输入短信内容')
                    return
                }
                if(!this.flxRes.length){
                    this.$message.warning('请选择专家类型')
                    return
                }
                // if(this.selectArr.length){
                    this.confirmLoading = true
                    let data = {
                        ...this.currentRow,
                        // sfhbydw:this.currentRow.sfhbydw && this.currentRow.sfhbydw.length?this.currentRow.sfhbydw.join(','):'',
                        sfhbydw:this.currentRow.sfhbydw,
                        zytc:this.currentRow.zytc && this.currentRow.zytc.length?this.currentRow.zytc.join(','):'',
                        zdyjsry:this.currentRow.zdyjsry?'指派':'不指派',
                        flx:this.flxRes.length?this.flxRes.join(','):'',
                        // ids:this.selectArr.join(',')
                    }
                    //ybmjhybmJcyXpByAuto
                    ybmjhybmOrJcyXpByAuto(data).then(res=>{
                        if(res.code == 200){
                            this.$message.success(res.message)
                            this.$emit('AssignmentConditionsSuccess',this.currentRow)
                            this.visible = false
                        }else{
                            this.$message.warning(res.message)
                        }
                        this.confirmLoading = false
                    })
                // }else{
                //     this.$message.warning('请选择从中抽选人的审评任务')
                // }
                
            }else{
                this.$message.warning('请输入人数')
            }
            
        },
    }
}
</script>
<style lang="less">
.randomlyRegistered-modal-box{
    .ant-modal-body{
        padding: 8px;
    }
}

.randomlyRegistered-content-box{
    td{
        padding: 5px;
        height: 30px;
    }
    .title-left-v{
        text-align: center;
        width: 160px;
        font-weight: 600;
        font-size: 16px;
        background-color:#e6f7ff;
        font-family: simHei;
        color: rgba(0, 0, 0, 0.85);
    }
    .ant-switch-checked{
        background-color: #66c24f;
    }
}
</style>